<template>
  <div class="notice-container">
    <div class="search-box">
      <el-input
          v-model="queryParams.noticeInput"
          clearable
          placeholder="请输入公告标题或内容关键词"
          style="width: 300px"
          @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button :icon="Search" @click="handleSearch"/>
        </template>
      </el-input>
    </div>

    <el-table
        :cell-style="{ textAlign: 'center' }"
        :data="tableData"
        :header-cell-style="{ textAlign: 'center' }"
        style="width: 100%"
        @row-click="handleRowClick"
    >
      <el-table-column label="ID" prop="noticeId" width="80"/>
      <el-table-column label="公告标题" prop="noticeTitle" width="180"/>
      <el-table-column label="发布人" prop="noticeAuthor" width="120"/>
      <el-table-column label="发布时间" prop="noticeTime" width="180">
        <template #default="{ row }">
          {{ formatTime(row.noticeTime) }}
        </template>
      </el-table-column>
      <el-table-column label="公告内容" prop="noticeContent">
        <template #default="{ row }">
          <div class="content-preview">{{ row.noticeContent }}</div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import axios from 'axios'
import {Search} from '@element-plus/icons-vue'
import {ElMessageBox} from 'element-plus'

const queryParams = ref({
  noticeInput: '',
  pageNum: 1,
  pageSize: 10
})

const tableData = ref([])
const total = ref(0)

// 格式化时间显示
const formatTime = (time) => {
  if (!time) return ''
  return new Date(time).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-')
}

// 获取公告列表
const fetchNoticeList = async () => {
  try {
    const response = await axios.get('/notice/page', {
      params: queryParams.value
    })
    tableData.value = response.data.data.list || []
    total.value = response.data.data.total || 0
  } catch (error) {
    console.error('获取公告列表失败:', error)
  }
}

// 搜索
const handleSearch = () => {
  queryParams.value.pageNum = 1
  fetchNoticeList()
}

// 分页大小变化
const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  fetchNoticeList()
}

// 当前页变化
const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  fetchNoticeList()
}

// 点击行显示详情
const handleRowClick = (row) => {
  ElMessageBox({
    title: `<strong>${row.noticeTitle}</strong>`,
    message: `
      <div style="margin-bottom: 10px;"><strong>发布人：</strong>${row.noticeAuthor}</div>
      <div style="margin-bottom: 10px;"><strong>发布时间：</strong>${formatTime(row.noticeTime)}</div>
      <div style="margin-top: 15px; white-space: pre-wrap;">${row.noticeContent}</div>
    `,
    dangerouslyUseHTMLString: true,
    customStyle: {
      width: '600px'
    }
  })
}

// 初始化加载数据
onMounted(() => {
  fetchNoticeList()
})
</script>

<style scoped>
.notice-container {
  padding: 20px;
}

.search-box {
  margin-bottom: 20px;
}

.content-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 加粗弹窗标题 */
:deep(.el-message-box__title) {
  font-weight: bold;
}
</style>